<template>
  <div class="MusicDetails">
    <!-- 音乐详情页面 -->
    <!-- 存放歌名，歌手，封面图片，音乐空间按钮 -->
    <div class="head">
      <h2>{{ MusicDetailsAl.name }}</h2>
      <p>{{ MusicDetailsAr.name }}</p>
      <div class="img">
        <img :src="MusicDetailsAl.picUrl" alt="" />
        <div class="bgc">
          <i
            v-if="flag == true"
            class="iconfont icon-bofang1"
            @click="getplay"
          ></i>
          <i
            v-if="flag == false"
            class="iconfont icon-24gf-pause2"
            @click="getplay"
          ></i>
        </div>
      </div>
      <audio
        :src="MusicUrl"
        ref="audio"
        @timeupdate="changeMusic"
        @ended="playend"
      ></audio>
    </div>
    <!-- 存放歌词，并且是滚动的 -->
    <div class="lyrics" ref="lyrics">
      <div class="lyr" v-for="(item, index) in Musiclyrics" :key="index">
        {{ item }}
      </div>
    </div>
    <!-- 这里可以分割成每一个组件 -->
    <!-- 猜你喜欢 -->
    <div class="like">
    </div>
    <!-- 大家都在听 -->
    <div class="allis"></div>
    <!-- 歌手与专辑 -->
    <div class="album"></div>
    <!-- 精彩评论 -->
    <div class="comments"></div>
  </div>
</template>

<script>
import {
  getMusicUrl,
  getMusicDetails,
  getMusiclyrics,
} from "../request/api/MusicDetails.js";
export default {
  data() {
    return {
      // 存放获取歌词的url地址
      MusicUrl: "",
      // 存放歌曲信息
      MusicDetailsAl: {},
      MusicDetailsAr: {},
      // 存放歌词
      Musiclyrics: [],
      // 存放歌词时间
      MusicTime: [],
      flag: true,
      MusiclyricsFlag: false,
      currentTimes: 0,
    };
  },
  created() {
    // 这里是获取路由传过来的数据
    // console.log(this.$route.query.item);
    // 获取音乐地址
    this.getMusicUrlF(this.$route.query.item.id);
    // 音乐详情
    this.getMusicDetailsF(this.$route.query.item.id);
    // 获取歌词
    this.getMusiclyricsF(this.$route.query.item.id);

    this.currentTimes = this.$store.state.currentTime;
  },
  methods: {
    // 定义获取音乐url地址的事件
    getMusicUrlF(id) {
      getMusicUrl("/song/url", { id }).then((res) => {
        this.MusicUrl = res.data[0].url;
      });
    },
    // 定义获取歌曲详情的事件
    getMusicDetailsF(id) {
      getMusicDetails("/song/detail", { ids: id }).then((res) => {
        this.MusicDetailsAl = res.songs[0].al;
        this.MusicDetailsAr = res.songs[0].ar[0];
        this.$store.commit("Cplayerflag", {
          picUrl: this.MusicDetailsAl.picUrl,
          name: this.MusicDetailsAl.name,
          MusicUrl: this.MusicUrl,
          songname: this.MusicDetailsAr.name,
        });
        // console.log(this.MusicDetailsAl,this.MusicDetailsAr);
      });
    },
    // 定义获取歌词的事件
    getMusiclyricsF(id) {
      getMusiclyrics("/lyric", { id }).then((res) => {
        this.dealLyr(res.lrc.lyric);
        // console.log(res);
      });
    },
    // 处理歌词方法
    dealLyr(lrc) {
      // 定义一个正则表达式,用于拆分出时间和歌词
      let reg = /\[(\d{2}:\d{2})\.\d{2,3}\](.*)/;
      lrc.split("\n").forEach((item) => {
        // 定义一个临时变量接收，正则拆分出来的数据
        let res = reg.exec(item);
        if (!res) {
          return;
        }
        if (!res[2]) {
          return;
        }
        this.MusicTime.push(res[1]);
        this.Musiclyrics.push(res[2]);
      });
      this.Musiclyrics.pop();
    },
    // 音乐播放改变事件
    changeMusic() {
      // 定义一个变量接收实时播放时间
      let current = this.$refs.audio.currentTime;
      this.$store.commit("getcurrentTime", current);
      // 获取分钟
      let minute = Math.floor(current / 60);
      // 获取秒钟
      let second = Math.floor(current % 60);
      //   对分钟和秒钟进行补零操作
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      //   定义一个变量接收 拼接后的字符串
      let time = `${minute}:${second}`;
      // 使用数组的findIndex方法进行对比，并接收它的值
      let index = this.MusicTime.findIndex((item) => {
        return item === time;
      });
      if (index == -1) {
        // this.MusiclyricsFlag = false
        return;
      }
      this.$refs.lyrics.scrollTop = 24 * index;
      if (index > this.$refs.lyrics.children.length - 1) {
        return;
      }
      [...this.$refs.lyrics.children].forEach((item) => {
        item.classList.remove("active");
      });
      this.$refs.lyrics.children[index].classList.add("active");
    },
    // 播放结束后更改控件
    playend() {
      this.flag = true;
      this.$refs.lyrics.scrollTop = 0;
    },
    // 点击播放音乐，切换iconfont
    getplay() {
      if (this.flag) {
        this.flag = false;
        this.$refs.audio.play();
        this.$refs.audio.currentTime = this.currentTimes;
      } else {
        this.flag = true;
        this.$refs.audio.pause();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.MusicDetails {
  height: 100%;
  background: #1b1c1a;
  .head {
    padding-top: 66px;
    h2 {
      width: 100%;
      text-align: center;
      font-size: 100px;
      color: #e6e6e6;
    }
    p {
      width: 100%;
      text-align: center;
      color: #b3b3b3;
    }
    .img {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: 967px;
        height: 967px;
        margin-top: 120px;
        border-radius: 66px;
      }
      .bgc {
        width: 233px;
        height: 233px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 483px;
        left: 667px;
        i {
          font-size: 120px;
        }
      }
    }
  }
  .lyrics {
    width: 100%;
    height: 500px;
    margin-top: 90px;
    overflow-y: auto;
    .lyr {
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #7585a2;
    }
    .active {
      color: #fff;
    }
  }
}
</style>